<template>
  <div class="supply">
    <ul v-loading="loading" style="min-height: 300px;" v-if="JSON.stringify(goodMessage)=='{}'">
      <li v-for="item in tableData" :key="item.id" class="goodsBox" @click="getgood(item)">
        <div class="goods">
          <img :src="baseUrl+item.img" alt="">
          <div class="goods_info">
            <span class="goods_name">{{ item.name }}</span>
            <p class="goods_description">{{ item.description }}</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="goodMessage" v-else>
      <img :src="baseUrl+goodMessage.img" alt="">
      <div class="goods">
        <h4>{{ goodMessage.name }}</h4>
        <div>
          <p>价格：{{ goodMessage.price }}</p>
          <p>产地：{{ goodMessage.location }}</p>
          <p>联系电话：{{ goodMessage.phone }}</p>
        </div>
        <p class="p1">{{ goodMessage.description }}</p>
    
      </div>
    </div>
  </div>
</template>
<script>
import homeApi from '@/api/apiHome';
 export default {
    data(){
      return {
        id:'',
        taglist:[],
        loading:false,
        tableData:[],
        baseUrl:'https://www.lucklylife.cn/api',
        commdityId:'',
        goodMessage:{}
      }
    },
    methods:{
      getGoodslist(){
        this.loading = true
        homeApi.getAllgoods(this.commdityId).then(res=>{
          this.tableData = res.data
          this.loading = false
        })
      },
      getHomeList(item){
        this.commdityId = item.id
        this.getGoodslist()
      },
      getgood(item){
        homeApi.getgoodCommidty(item.id).then(res=>{ 
          this.goodMessage = res.data
        })
 
      }
    },
    mounted(){
      this.id = this.$route.query.id;
      if(this.id){
        this.getgood({id:this.id})    
      }else{
        this.getGoodslist();
      }
    }
 }
</script>
<style scoped lang="less">
.header{
  margin-top: 10px;
  
}
.className{
  display: flex;
  justify-content: flex-start;

}
ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.goodsBox{
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px ;
  overflow: auto;
  cursor: pointer;
  background-color: #fff;
  width: 279px;
  height: 279px;
}
.goods{
  margin: 10px;
  img{
    width: 150px;
    height: 150px;
    border-radius: 3px;
    margin: 0 auto;
    display: block;
  }
  .goods_info{
    margin-top: 15px;
    .goods_name{
      font-size: 18px;
      color: #666;
      margin-bottom: 10px;
    }
    .goods_description{
      font-size: 14px;
      line-height: 28px;
      width: 100%;
      color: #606266;
      font-size: 12px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: -o-ellipsis-lastline;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;   
      -webkit-box-orient: vertical; 
      display: -webkit-box;
    }
  }
}
.sp1{
  font-size: 14px;
  color: #666;
  margin: 10px;
}
.active{
  color: #007fff;
}
.goodMessage{
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  img{
    width: 300px;
    height: 300px;
  }
  .goods{
    margin-left: 20px;
    h4{
      font-size: 20px;
      line-height: 50px;
    }
    p{
      line-height: 34px;
    }
    .p1{
      line-height: 28px;
      font-size: 14px;
      color: #606266;
    }
  }
}
</style>